{% extends "layout.html" %}



{% block body %}

<div class="container">
        <div class="row" style="padding: 2px 2px 2px;">

            <form  method=POST action="{{ url_for('level') }}">

          
                     <button type="submit" class="btn  col-xs-3 col-sm-3 col-md-3 col-lg-3" style="padding: 2px 2px 2px;">Level</button>
            </form>

            <form  method=POST action="{{ url_for('artical_mode') }}">

          
                     <button type="submit" class="btn  col-xs-3 col-sm-3 col-md-3 col-lg-3" style="padding: 2px 2px 2px;">Artical</button>
            </form>
            <form method=GET action="{{ url_for('bagmode') }}">

                    
                        <button type="submit" class= "btn   col-xs-3 col-sm-3 col-md-3 col-lg-3
" name="bagmode" value=True  style="padding: 2px 2px 2px;">Bag Mode</button>
                     
                        </form> 

<form method=GET action="{{ url_for('testmode') }}">

                    
                        <button type="submit" class= "btn   col-xs-3 col-sm-3 col-md-3 col-lg-3
" name="testmode" value=True  style="padding: 2px 2px 2px;">Test Mode</button>
                     
                        </form>



        </div>
        <div class="row">
        <p id="user_level" class="text-muted col-xs-3 col-sm-3 col-md-3 col-lg-3" style="padding: 2px 2px 2px;">{{user_level}}</p>
</div>
 <ul class="list-group" style="height:420px; overflow-y:scroll;overflow-x:hidden;list-style-type:none">

        <li  class="list-group-item " id="li" style="border: 1px solid blue;"> 
    
                   <div class="row " style="padding: 2px 2px 2px;" >
                          <div class=" col-xs-6 col-sm-6 col-md-6 col-lg-6">
                          <p class="text-primary lead font-weight-bold "  preload="auto" id="word" style="zoom:150%;" ></p>
                          </div>           

                      <div class="float-right col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
                      <p class="text-muted " id="word_index"></p>
                      </div>                    
                  </div> 
                           <div class="row " >
                            <audio  class="col-xs-8 col-sm-8 col-md-8 col-lg-8 " id="wordMusic"   controls="controls"  preload="auto" type="audio/mp3" autoplay="autoplay" ></audio> 
                              
                          </div>
        
            <div class="row" style="padding:2px 2px 2px;">
             
                    <img class ="img-rounded img-responsive col-xs-3 col-sm-3 col-md-3 col-lg-3" id="image_a" >

                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3" id="image_b" >
                 
          
                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3" id="clipart_c" >
                
                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3" id="clipart_d"  >
                           
             </div> 
            <div class="row"  style="padding:2px 2px 2px;">
               <span class="text-muted" > [Tips:]</span>

                <span class="text-responsible" id="word_tip" style="padding:2px 2px 2px;"></span>
              </div>  
             <div class="row" style="padding:2px 2px 2px;"> 
              <span class="text-muted"> [Defintion:]</span>
              <span class="text-responsible" id="word_def" > </span>
            </div>

            <div class="row" style="padding: 2px 2px 2px;">
 

                
                  <input  class= "to_bag float-right col-xs-2 col-sm-2 col-md-2 col-lg-2" name="send2bag"   value=True  type="checkbox" style=" width:28px;height:28px; border:3px solid blue; margin-left:12px; padding: 2px 2px 2px;" ></input>
                 
            

      </div> 
            
         
        </li class="list-group">



   
 </ul>    
    
            <div class="row"  style="padding: 6px 6px 6px;"> 
              
                 
                        
                            <input type="text" class=" col-xs-4 col-sm-4 col-md-4 col-lg-4" name="searchtxt"  id="searchtxt" style="border:1px solid blue;"></input>
                             
                           <button type="submit" class= "btn btn-info col-xs-4 col-sm-4 col-md-4 col-lg-4"    id="search" >Search</button>
                       

                    
                        <button   type="submit" class = " btn btn-info  col-xs-2 col-sm-2 col-md-2 col-lg-2"  name="previous" id ="previous" value=True >Prev</button>
             
                        <button   type="submit" class = "btn btn-info col-xs-2 col-sm-2 col-md-2 col-lg-2" name="next" id="next" value=True  >Next</button>

                       


    
                    

          </div> 


                <div class="row"  style="padding: 6px 6px 6px;">
                    
                    <button class= "btn btn-warning col-xs-2 col-sm-2 col-md-2 col-lg-2 " id="bag_emptied" value=True  >BagEmptied!</button> 
                      <button  class= "btn  disabled col-xs-2 col-sm-2 col-md-2 col-lg-2  " name="bag_len" id="bag_len" >{{bag_len}}</button>
                    

            
          <button type="submit" class= "btn btn-info  col-xs-2 col-sm-2 col-md-2 col-lg-2  " id="dozen" value=True >4 more</button>

        

                    


                    
                    <button type="submit" class= "btn btn-info  col-xs-4 col-sm-4 col-md-4 col-lg-4  " id="synonyms" value=True >Synonyms</button>
                     
                    <button type="submit" class= "btn btn-info  col-xs-2 col-sm-2 col-md-2 col-lg-2  " id="explode_mode" value=True >Explode!</button>
              
                    </div>

</div>



<script  src="/static/js/init.js" type=text/javascript >

</script>


<script  src="/static/js/learnmode.js" type=text/javascript >

</script>

{% endblock %}

